<script lang="ts" setup>
import {
  NConfigProvider,
  darkTheme,
  lightTheme,
  NMessageProvider,
  NNotificationProvider,
  NDialogProvider,
  NLoadingBarProvider,
} from "naive-ui"
import { onMounted } from "vue"
import fullScreenLoading from "@cop/loading/fullScreenLoading/index.vue"
import { useStore } from "vuex"
import { getStorage } from "@/util/cache"
import root from "@/views/root.vue"

const store = useStore()
const initThemeColor = () => {
  const themeColor =
    getStorage("themeColor") == null ? store.state.themeColor : getStorage("themeColor")

  store.commit("setThemeColor", themeColor)
}
const initTheme = () => {
  const theme = getStorage("theme") == null ? store.state.theme : getStorage("theme")
  store.commit("setTheme", theme)
}

onMounted(() => {
  initThemeColor()
  initTheme()
})
</script>

<template>
  <n-config-provider
    :theme="store.state.theme == 'light' ? lightTheme : darkTheme"
    :theme-overrides="{
      common: {
        primaryColor: store.state.themeColor,
        primaryColorHover: store.state.themeColor,
        primaryColorPressed: store.state.themeColor,
        primaryColorSuppl: store.state.themeColor,
      },
      Scrollbar: {
        color: `var(--themeColor)`,
        colorHover: 'var(--themeColor)',
      },
    }"
  >
    <n-notification-provider>
      <n-dialog-provider>
        <n-loading-bar-provider>
          <n-message-provider>
            <root />
            <fullScreenLoading />
          </n-message-provider>
        </n-loading-bar-provider>
      </n-dialog-provider>
    </n-notification-provider>
  </n-config-provider>
</template>

<style lang="scss">
@import url("@/styles/reset.scss");

//自定义nprogress颜色 #nprogress
.bar {
  background: var(--themeColor) !important; //自定义颜色
}

body {
  // background-color: var(--BodyColor);
  transition: all 0.3s var(--n-bezier);
  // opacity: 1 !important;
}

.light {
  // background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/bg.jpg");
  // background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/lightBg.jpeg");
  background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/lightBg.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.dark {
  // background: #161821;
  // background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/darkBg.jpg");
  // background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/darkBg.png");
  background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/darkBg.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

@media screen and (max-width: 768px) {
  .light {
    background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/mobileLight.jpeg");
    background-size: cover;
    background-attachment: fixed;
    // background-position: center;
  }

  .dark {
    background: url("https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/mobileDark.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
  }
}
</style>
